<template>
  <div class="work-pannel f25" :class="[item.title&&'blocks',isClass]">
    <div class="work-block">
      <!-- <router-link class="work-link" :to="{ name: 'Work'}"> -->
        <img @click="navigate" v-lazy="item.img" class="work-pic" />
      <!-- <router-link to="/" custom v-slot="{ navigate }">
      </router-link> -->
    </div>
  </div>

</template>
<script>
import { onMounted, ref, computed, defineComponent, inject } from 'vue'
import { useStore } from "vuex";

const renm = () => {
  return Math.random()
}
export default defineComponent({
  name: 'work-item',
  props: {
    random:{ 
      type: [Number,String],
      default: ()=>{
        return Math.floor(Math.random()*5)
      }
    },
    item:{ 
      type: Object,
      default: ()=>{}
    },
  },
  emits: ['onClick'],
  setup(props,ctx){
    const store = useStore()
    const setNavFixed = inject('setNavFixed')
    
    const isClass = computed(()=>{
      const sed = {
        0: 'd',
        1: 'xs',
        2: 's',
        3: 'm',
        4: 'l',
        5: 'xl',
      }
      return sed[props.random]
    })
    const navigate = () => {
      setNavFixed(true)
      ctx.emit('onClick')
    }

    onMounted(()=>{
      // console.log(44,props.item)
    })

    return {
      isClass,
      navigate
    }
  }
})
</script>
<style lang="less" scoped>
.work-pannel{
  flex-grow: 0;
  .padding-right(36px) ;
  .padding-bottom(36px) ;
  width: 50%;
  &.block{
    width: auto;
    height: 40vh;
  }
  &.d{width: 33.3%;}
  &.xs{width: 23.9%;}
  &.s{width: 35.9%;}
  &.m{width: 47.9%;}
  &.l{width: 57.9%;}
  &.xl{width: 74.9%;}
  @media @max768{
    width: 100% !important;
    .padding-right(20px) ;
    .padding-bottom(20px) ;
  }
  a{
    color: #333;
    font-style: italic;
    &:hover{
      font-style: normal;
    }
  }
}
.work-block{
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.work-link,.work-pic{
  display: block;
  width: 100%;
  height: 100%;
}

</style>